<template>
  <div class="b-line" />

  <div class="b-title">盘点详情</div>
  <el-descriptions :column="1" class="p-5 bg-opacity-0"
    ><!-- content bg-opacity-0" -->
    <el-descriptions-item
      v-for="(item, index) in infoList"
      :key="index"
      label-class-name="display-none"
    >
      <template v-slot:label />
      <div class="flex align-center">
        <img
          :src="item.icon"
          style="width: 1.04vw; vertical-align: middle"
          class="mr-2"
        />
        <span
          class="font-14"
          style="vertical-align: middle; color: rgba(255, 255, 255, 0.5)"
          >{{ item.label }}：</span
        >
        <div
          class="font-bold text-white font-16 inline-block"
          :style="item.style ? item.style(info[item.prop]) : null"
        >
          {{
            item.formatter ? item.formatter(info[item.prop]) : info[item.prop]
          }}
        </div>
      </div>
    </el-descriptions-item>
  </el-descriptions>
  <div class="kb-line" />
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import s1 from "@/assets/home/s1.png";
import s2 from "@/assets/home/s2.png";
import s3 from "@/assets/home/s3.png";
import s4 from "@/assets/home/s4.png";
import s5 from "@/assets/home/s5.png";
import s6 from "@/assets/home/s6.png";

import { realWH } from "@/utils";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
});

const col = {
  danger: "#E05156",
  success: "#46C687"
};

const info = computed(() => props.data || {});
const infoList = [
  // { label: "借还记录", prop: "lendReturnCount", icon: s1 },
  {
    label: "盘点结果",
    prop: "nearestStockTakeResult",
    formatter: val => (val == 1 ? "正常" : "异常"),
    icon: s2,
    style: (val: any) => {
      const color = val == 1 ? col.success : col.danger;
      return { color };
    }
  },
  // {
  //   label: "定检超期率",
  //   prop: "inspectOutTimePercent",
  //   formatter: val => (val || 0) + "%",
  //   icon: s3
  // },
  {
    label: "盘亏",
    prop: "loss",
    icon: s4,
    style: () => ({ color: col.danger })
  },
  // {
  //   label: "借还超期率",
  //   prop: "lendReturnOutTimePercent",
  //   formatter: val => (val || 0) + "%",
  //   icon: s5
  // },
  {
    label: "盘赢",
    prop: "profit",
    icon: s6,
    style: () => ({ color: col.success })
  }
];
</script>

<style lang="scss" scoped>
::v-deep(.el-descriptions__body) {
  background: transparent;
  color: #fff;
}
::v-deep(.el-descriptions__cell) {
  // display: flex;
  align-items: center;
}
</style>
